import React from 'react';
import {Icon,Tools } from 'weaver-mobile';
import QueueAnim from 'rc-queue-anim';
const getLabel = Tools.getLabel;

/**********************             模板一               *****************************/
//获取模板  报销流程
const getTemplate = (param) => {
    const newTemplate = {
        default: [
            {
                key: 'col1',
                // style: { flex: '0 0 auto'},
                render: (data) => {
                    let {icon,imgSrc,imageId,imageName} = data;
                    return(
                        <div className={`fna-home-template`}>
                           <div className={param.haveBorder ?'fna-home-template-left have-border-lfet' :  `fna-home-template-left`}>
                                {imageId === 0 ? 
                                    <div className={`fna-icon-div ${imageName}_div`}><Icon type={imageName} /></div> 
                                    :
                                    <img src={`/weaver/weaver.file.FileDownload?fileid=${imageId}&cwid=fnaRemember`}/>
                                }

                                <div className={'word-fontSize-12'}>{data.title}</div>
                            </div>
                            <div className={`fna-home-template-middle`}><img src={imgSrc.splitLine} /></div>
                            <div className={`fna-home-template-right`}>
                                {getTypeLayout(data)}
                            </div>
                        </div>
                        
                    )
                }
            },  

                
        ],
    };

    return newTemplate;
}

//记一笔类型 对应布局
const getTypeLayout = (data) =>{
    let layout = [];
    if(data.tableName == 'fnaCT_cb' || data.tableName == 'fnaCT_ywzd' || data.tableName == 'fnaCT_tx' || data.tableName == 'fnaCT_bg' || data.tableName == 'fnaCT_yb'){ //餐补
        layout = [
            <div className={`fna-home-foodSubsidy`} key={data.id}>
                <div>
                    <p>{data.user}</p>
                    <p><span><Icon type={'icon-shizhong-fill'} /></span><span className="word-fontSize-12">{data.time}</span></p>
                </div>
                <div>&nbsp;</div>
                <div>{data.amount}</div>
            </div>
        ] 
    }else if(data.tableName == 'fnaCT_fj' || data.tableName == 'fnaCT_hc' || data.tableName == 'fnaCT_db'){ //飞机
        layout = [
            <div className={`fna-home-air`} key={data.id}>
                <div>
                    {data.endPlace ? 
                        <p><span>{data.startPlace ? data.startPlace : getLabel(506418,'未知')}</span><div className={'arrive'}><img src={data.imgSrc.arrive} /></div><span>{data.endPlace ? data.endPlace : getLabel(506418,'未知')}</span></p> 
                        : <p dangerouslySetInnerHTML={{__html: data.startPlace}} />}
                    <p>{data.user}</p>
                </div>
                <div className='stay-two'><span><Icon type={'icon-shizhong-fill'} /></span><span>{data.time}</span></div>
                <div>{data.amount}</div>
            </div>
        ] 
    }else if(data.tableName == 'fnaCT_snjt' || data.tableName == 'fnaCT_dd' ){ //交通  滴滴
        layout = [
            <div className={`fna-home-traffic`} key={data.id}>
                <div>
                    {data.endPlace ?
                        <p><span dangerouslySetInnerHTML={{__html: data.place}}></span><div className={'arrive'}><img src={data.imgSrc.arrive} /></div>{data.endPlace}</p>
                        :
                        <p></p> 
                    }
                    <p>{data.user}</p>
                </div>
                <div className='stay-two'>
                    <span><Icon type={'icon-shizhong-fill'} /></span><span>{data.time}</span>
                    <span className='upTime'>上</span><span className='detailTime'>{data.startTime}</span>
                    <span className='downTime'>下</span><span className='detailTime'>{data.endTime}</span>
                </div>
                <div>{data.amount}</div>
            </div>
        ] 
    }else if(data.tableName == 'fnaCT_zs'){ //住宿
        layout = [
            <div className={`fna-home-stay`} key={data.id}>
                <div>
                    <p dangerouslySetInnerHTML={{__html: data.des}}></p>
                    <p><span>{data.user}</span></p>
                </div>
                <div className='stay'><span><Icon type={'icon-shizhong-fill'} /></span><span>{data.time}</span></div>
                <div>{data.amount}</div>
            </div>
        ] 
    } else { //其他
        layout = [
            <div className={`fna-home-foodSubsidy`} key={data.id}>
                <div>
                    <p>{data.user}</p>
                    <p><span><Icon type={'icon-shizhong-fill'} /></span><span className="word-fontSize-12">{data.time}</span></p>
                </div>
                <div>&nbsp;</div>
                <div>{data.amount}</div>
            </div>
        ] 
    }

    return layout;
}


/**********************             模板二               *****************************/
//获取模板  待办事项
const getTemplate_peding = (template) => {
    const newTemplate = {
        default: [
            {
                key: 'col1',
                // style: { flex: '0 0 auto'},
                render: (data) => {
                    let {title,info,detail,status,style,money,workflowName,id} = data;
                    return(
                        <div className={`fna-home-template-list`}>
                            <QueueAnim duration={900}>
                                <div className={`fna-home-template-list-head`} key={'a'}>
                                    <span dangerouslySetInnerHTML={{__html: title}}/>
                                    <span dangerouslySetInnerHTML={{__html: status}} style={style}/>
                                </div>

                                <div dangerouslySetInnerHTML={{__html: info}} className={`word-fontSize-12 fna-home-template-list-detail`} key={'b'}/>
                                <div dangerouslySetInnerHTML={{__html: detail}} className={`word-fontSize-12 fna-home-template-list-detail`} key={'c'}/>
                                <div className={'last'} key={'d'}>
                                    <span className={'costBtn'}>{workflowName}</span>
                                    <span className={'gay'}>
                                        <span>{money}</span>
                                    </span>
                                </div>
                            </QueueAnim>
                        </div>
                        
                    )
                }
            },  

                
        ],
    };
    return newTemplate;
}












export {
    getTemplate,
    getTemplate_peding,
}